<template>
    <!-- EA-BA-DA-我的账户 安全设置 银行卡 -->
    <div class="wrapper" v-show="showBankSetting">
        <div id="wrap">
            <div class="head">
                <p class="title">银行卡</p>
                <!-- <img src="../../assets/img/yinhangka.png" alt=""> -->
                <span class="img">
                    <i class="iconfont iconshezhi_yinhangka"></i>
                </span>
                <span @click="$emit('cancel')" class="cha">
                    <i class="iconfont iconty_guanbi"></i>
                </span>
            </div>
            <div class="content">
                <div class="inputContent">
                    <input-item-pc class="input" v-on:clear-content="userName=''" @input="userName=$event" :input-value="userName" input-name='用户名:' input-placeholder='请输入用户名'></input-item-pc>
                    <div @click="showBank">
                        <input-item-pc class="input input2" :readonly="readonly" v-on:clear-content="bankTypeValue=''" @input="bankTypeValue=$event" :input-value='bankTypeValue' input-name='银行类型:' input-placeholder='请选择银行类型'>
                            <span><i class="iconfont" :class="!showBankType?'iconlb_tianjia':'iconlb_qingkong'" ></i></span>
                        </input-item-pc>
                    </div>
                    <input-item-pc class="input input2" :input-value="bankNumber" v-on:clear-content="bankNumber=''" @input="bankNumber=$event"  input-name='银行卡号:' input-placeholder='请输入银行卡号'>
                    </input-item-pc>
                </div>
                <!-- 两个按钮 -->
                <button @click="$emit('cancel')" class="btn quxiao">取消</button>
                <button @click="$emit('save',bankNumber)" class="btn baocun">保存</button>
                <!-- 银行类型 -->
                <ul v-show="showBankType" class="bankType">
                    <li @click="getInnerHTML(item)" v-for="(item,index) in bankType" :key="index">{{ item }}</li>
                </ul>
        </div>
    </div>
    </div>
    
</template>

<script>
import inputItemPc from './inputItem-PC2'
export default {
    name: 'securitySetting',
    props: ['showBankSetting'],
    data(){
        return{
            title: '银行卡',
            userName: '',
            bankType: [
                '中国农业银行',
                '中国建设银行',
                '中国银行',
                '招商银行',
                '交通银行',
                '邮政储蓄银行',
                '中国民生银行',
                '中国工商银行'
            ],
            showBankType: false,
            bankTypeValue: '',
            bankNumber: '',
            readonly: true
        }
    },
    
    components:{
        inputItemPc
    },
    //方法们
    methods:{
        clearUserName: function(val){
            console.log(1)
            console.log(2)
            this.userName=''
        },
        //展示银行列表
        showBank: function(){
            this.showBankType = !this.showBankType
        },
        getInnerHTML: function(item){
            this.bankTypeValue = item;
            this.showBankType = false;
        },
        clearBankType: function(){
            this.bankTypeValue = '';
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
::-webkit-scrollbar
    width: 4px;
    height: 16px;
    background-color: #F5F5F5;
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
.wrapper
    position fixed;
    width 100%;
    height 100%;
    top 0 
    left 0
    right 0
    bottom 0
    background-color rgba(0,0,0,.2);
    z-index 1000
    #wrap
        position absolute;
        top 50%;
        left 50%;
        transform translate(-50%, -50%)
        width 480px;
        height 350px;
        background-color #faf8f8
        border-radius 5px;
        
        .head
            position relative;
            width 480px;
            height 48px;
            background-color #1d222e;
            border-top-left-radius 5px;
            border-top-right-radius 5px;

            .title
                height 48px;
                width 480px;
                line-height 48px;
                text-align center;
                font-weight bold
                color #fff;
                font-size 15px;
            .img 
                position absolute;
                top 14px;
                left 12px;
                //占位代码 删
                width 16px;
                height 14px;
                display inline-block;
                .iconfont 
                    font-size 18px 
                    color #fff
            .cha
                position absolute;
                right 16px;
                top 14px;
                cursor pointer;
                //占位代码 删
                width 14px;
                height 14px;
                .iconfont 
                    color $color-theme-red  
                    font-size 24px
        .content
            width 478px;
            height 300px;
            border 1px solid #dbd3d3;
            background-color #faf8f8;
            border-top none;
            position relative;
            // top -18px;
            // padding-top 18px;
            .inputContent
                width 460px;
                height 219px;
                margin-left 18px;
                // border 1px solid red;
                position relative;
                overflow auto;
                .input 
                    margin-bottom 5px;
                .input2
                    position relative;
                    span 
                        position absolute;
                        top 45px;
                        right 15px;
            .btn
                position absolute
                bottom 19px;
                width 94px;
                height 34px;
                border none;
                outline none;
                background-color #f6f6f6;
                border 1px solid #dbd3d3;
                box-shadow 0px 2px 5px 2px #eee;
                border-radius 5px;
                color #2b3042;
                font-size 14px;
                text-align center;
                cursor pointer;
            
            .quxiao
                left 135px;
            .baocun
                left 248px;
                background-color #c22323;
                color #fff;
                box-shadow 0px 1px 1px 1px #c22323 inset;
            ul
                list-style none;
                width 438px;
                border 1px solid #dbd3d3;
                background-color #faf8f8;
                z-index 999;
                position absolute;
                top 142px;
                left 18px;

                li
                    width 438px;
                    // height 36px;
                    // line-height 36px;
                    font-size 14px;
                    color #2b3042;
                    text-align center;
                    line-height 30px
                li:hover
                    cursor pointer;
                    color red;
                
            
           
        
</style>